var viewBtnGroupApp = new Vue({
    el:"#viewBtnGroup",
    data:{
        menus:[
            {},
            {
                items:["打包","部署","一键"],
                style:{color:"yellow"}
            },{
                items:["版本","打包","部署","一键"],
                style:{color:"blue"}

            },{
                items:["环境","打包","部署","一键"],
                style:{color:"red"}
            },{
                items: ["详情","打包", "部署", "一键"],
                style: {color: "green"}
            }],
        svg:null
    },
    created:function(){
        this.addSvgTree();
    },
    methods:{
        showTree:function(){
            $("#view").html("");
            this.addSvgTree();
        },
        showSimple:function(){
            $("#view").html("");
        },
        removeMenu:function(){
            this.svg.selectAll(".menu").remove();
        },
        addMenu : function(d){
            var svg = this.svg;
            this.removeMenu();
            //get menuItem from menu
            var menuItemObj = this.menus[d.depth];
            if(menuItemObj){
                var menuItems = menuItemObj.items;
                if(menuItems && menuItems.length>0){
                    var menu = svg.selectAll(".menu")
                        .data([""])
                        .enter()
                        .append("g")
                        .attr("class", "menu")
                        .attr("transform", "translate(" + d.y + "," + d.x + ")");
                    //menu.selectAll("circle");

                    var menuItem = menu.selectAll(".menu-item")
                        .data(menuItems)
                        .enter()
                        .append("g")
                        .attr("class", "menu-item")
                        .on("click",function(d){
                            createModalApp.show();
                            if( d== '打包'){

                            }else if(d =='部署'){

                            }else if(d =='完全'){

                            }
                        });
                    var color = menuItemObj.style.color;
                    menuItem.append("circle").attr("r",26)
                        .style("fill",color?color:"green")
                        .style("fill-opacity","0.5");

                    menuItem.append("text")
                        .attr("dy",4)
                        .attr("dx",-14)
                        .text(function(d) { return d; });
                    menuItem.transition()
                        .duration(750)
                        .attr("transform", function(d,i){return "translate(" + 100*Math.sin((i+1)*Math.PI/4) + "," + -100*Math.cos((i+1)*Math.PI/4) + ")"});
                }

            }

        },
        addSvgTree:function(){

            var that = this;
            //d3 svg tree
            var m=[40,120,80,120],
                w=$("#view").width()-m[1]-m[3],
                h=700-m[0]-m[2];

            // d3.select("#view")
            //     .on("click",function(d,a,b){
            //         console.info(d);
            //         console.info(a);
            //         console.info(b);
            //     });
            var svg = d3.select("#view").append("svg")
                .attr("width", w+m[1]+m[3])
                .attr("height", h+m[0]+m[2])
                .append("g")
                .attr("transform","translate("+m[3]+","+m[0]+")");

            this.svg = svg;

            d3.text("data.json",function(error,data){
                var hierarchy = d3.hierarchy(JSON.parse(data));
                var tree = d3.tree();
                tree.size([h,w-50]);
                tree(hierarchy);
                var nodes = hierarchy.descendants();
                var links = hierarchy.links();

                var link = svg.selectAll(".link")
                    .data(links)
                    .enter()
                    .append("path")
                    .attr("class", "link")
                    .attr("d",function(d){
                        return "M"+d.source.y+","+d.source.x
                            +"C"+(d.source.y+d.target.y)/2+","+d.source.x
                            +" "+(d.source.y+d.target.y)/2+","+d.target.x
                            +" "+d.target.y+","+d.target.x;
                    });


                var node = svg.selectAll(".node")
                    .data(nodes)
                    .enter()
                    .append("g")
                    .attr("class", "node")
                    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
                    .on("click",function(d){
                        that.addMenu(d);

                    });

                node.append("circle")
                    .attr("r", 8);

                node.append("text")
                    .attr("dx", function(d){return d.children? -12:12;})
                    .attr("dy", 3)
                    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
                    .text(function(d) { return d.data.name; });

            });
        }


    }
});

//create model
var createModalApp = new Vue({
    el:"#createModal",
    data:{

    },
    mounted:function(){
        var that =this;
        $("#createModal").on('hide.bs.modal',function(){
            //clear
        });
    },
    methods:{

        createSave:function(){

        },
        show:function(){
            $("#createModal").modal('show');
        },
        hide:function(){
            $("#createModal").modal('hide');
        }
    }

});

